<template>
	<view class="page-content">
		<view class="page-top">
			<view class="page-top-o">
				<view class="page-top-l">
					<image :src="datalist.img" class="page-top-img"></image>
				</view>
				<view class="page-top-r">
					<view class="page-top-r-tit">{{datalist.title}}</view>
					<view class="page-top-r-box">
						<view class="page-top-r-team">{{datalist.game_start_time}}</view>
					</view>
				</view>
			</view>
			<view class="page-top-t">
				<view class="page-top-r-team">{{datalist.group_name}}({{datalist.group_number}}人)</view>
				<view class="page-top-r-mon">¥{{datalist.group_money}}</view>
			</view>
		</view>
		<view class="body-box">
			<view class="box-tit">
				<image class="icon-dw" src="../../static/clockIn/team.png" />
				<text class="txt-jc">团队名称：{{datalist.team_name}}（{{datalist.group_number}}人）</text>
			</view>
			<!--队长+队员-->
			<view class="box-team2">
				<block v-for="(item,index) in datalist.user" :key="index">
					<view class="box-team-li">
						<view class="box-team-l">
							<image class="icon-dys" :class="item.type===1?'icon-dz':'icon-dy'"
								:src="item.type===1?duizhang:duiyuan" />
							<text>{{item.type===1?'队长：':'队员：'}}</text>
							<text class="box-team-l-name">{{item.name}}</text>{{item.mobile}}
						</view>
						<view class="box-team-r"></view>
					</view>
				</block>
			</view>
		</view>
		<view class="body-box">
			<view class="body-box-text"><text>提示：</text>{{tip}}</view>
		</view>
		<view class="page-foot"
			:style="{color:signallsta==='1'?'#fff':'#999',background:signallsta==='1'?'#02BB6F':'#ddd'}">
			<view class="page-foot-l">合计：{{datalist.group_money}}元</view>
			<view class="page-foot-r" @click="confirm">确认支付</view>
		</view>

	</view>
</template>

<script>
	import rowInput from '@/pages/signUp/components/row_input.vue'
	import {
		getgameorders,
		getwechatpays,
		getorderstatuss
	} from '@/common/api.js'
	export default {
		components: {
			rowInput
		},
		data() {
			return {
				duizhang: '/static/clockIn/captain.png',
				duiyuan: '/static/clockIn/icon-dy.png',
				datalist: {
					img: '',
					tit: '2021春季城市穿越赛春季城市穿越赛春季城市穿越赛春季城市穿越赛',
					team: '成年组',
					time: '2021/04/06',
					num: '5',
					money: '345'
				},
				signallsta: '2',
				money: '345',
				tip: '',
				order_id: '',
			}
		},
		onLoad(option) {
			console.log(222, option)
			this.order_id = option.order_id
			this.getdata();
		},
		onShow() {

		},
		methods: {
			//确认支付
			confirm() {
				getwechatpays({
					order_id: this.order_id
				}).then(res => {
					this.getconfig(res.data);

				})
			},

			getconfig(configdata) {
				let _this = this;
				uni.requestPayment({
					provider: 'wxpay',
					appId: configdata.appId,
					timeStamp: configdata.timestamp,
					nonceStr: configdata.nonceStr,
					package: configdata.package,
					signType: configdata.signType,
					paySign: configdata.paySign,
					success: function(res) {
						console.log('success:' + JSON.stringify(res));

						//判断是否支付
						getorderstatuss({
							order_id: _this.order_id
						}).then(res2 => {
							console.log(3334, res2)

							if (res2.data.type === 'SUCCESS') {
								uni.showToast({
									title: '支付成功！',
									icon: 'none',
									duration: 5000
								});
								setTimeout(function() {
									uni.switchTab({
										url: '/pages/index/index'
									});
								}, 1000);
							} else {
								uni.showToast({
									title: res2.msg,
									icon: 'none',
									duration: 3000
								})
							}
						})
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
					}
				});
			},
			getdata() {
				getgameorders({
					order_id: this.order_id
				}).then(res => {
					this.datalist = res.data
					this.datalist.img = res.data.img[0]
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.icon-dt {
		width: 22rpx;
		height: 28rpx;
		margin-right: 18rpx;
	}

	.icon-dw {
		width: 28rpx;
		height: 24rpx;
		margin-right: 18rpx;
	}

	.icon-dz {
		width: 34rpx;
		height: 26rpx;
		margin-right: 18rpx;
	}

	.icon-dy {
		width: 32rpx;
		height: 32rpx;
		margin-right: 15rpx;
	}

	.icon-dh {
		width: 22rpx;
		height: 24rpx;
		margin-right: 5rpx;
	}

	.icon-tx {
		width: 30rpx;
		height: 30rpx;
		border-radius: 15rpx;
		margin-right: 12rpx;
	}

	.icon-b {
		transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		/* Internet Explorer 9*/
		-moz-transform: rotate(90deg);
		/* Firefox */
		-webkit-transform: rotate(90deg);
		/* Safari 和 Chrome */
		-o-transform: rotate(90deg);
		/* Opera */
	}

	.team-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333
	}

	.input-box {
		border: 1rpx solid #CCCCCC;
		border-radius: 5rpx;
		height: 66rpx;
		width: 100%;
	}

	.team-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333
	}

	.icon-check {
		width: 30rpx;
		height: 30rpx;
		margin-right: 20rpx;
	}

	.page-top-tit-icon {
		color: #FE5050;
		margin-right: 20rpx;
	}

	.page-content {
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
	}

	.page-top {
		display: flex;
		flex-direction: column;
		background: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;

		.page-top-o {
			margin-bottom: 30rpx;
			padding-bottom: 30rpx;
			display: flex;
			flex: 1;
			justify-content: space-between;
			border-bottom: 1rpx solid #f5f5f5;


			.page-top-l {
				display: flex;
				width: 216rpx;
				height: 130rpx;
				margin-right: 27rpx;

				.page-top-img {
					width: 216rpx;
					height: 130rpx;
				}
			}

			.page-top-r {
				width: calc(100% - 240rpx);
				display: flex;
				flex-direction: column;
				line-height: 40rpx;

				.page-top-r-tit {
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
					margin-bottom: 20rpx;
				}

				.page-top-r-box {
					display: flex;
					justify-content: space-between;
					font-size: 32rpx;
					font-weight: 500;

					.page-top-r-team {
						color: #333333
					}

					.page-top-r-mon {
						color: #FE5050;
					}
				}
			}
		}

		.page-top-t {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.page-top-r-team {
				color: #333333
			}

			.page-top-r-mon {
				color: #FE5050;
			}

			.page-top-tit {
				line-height: 30rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;

				.page-top-label {
					display: flex;
					align-items: center;
				}
			}
		}
	}

	.body-box {
		background-color: #fff;
		display: flex;
		flex-direction: column;
		margin-bottom: 20rpx;
		padding: 30rpx 32rpx;

		.body-box-text {
			font-size: 28rpx;
			line-height: 50rpx;
			color: #999;

			text {
				color: #333;
			}
		}

		.box-team2 {
			display: flex;
			flex-direction: column;

			.box-team-li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
				margin-bottom: 30rpx;

				.box-team-l {
					display: flex;
					align-items: center;

					.box-team-l-name {
						margin-right: 10rpx;
					}
				}

				.box-team-r {
					display: flex;
					align-items: center;
					color: #02BB6F;
				}
			}
		}

		.box-team2.box-team-li:nth-of-type(2) .box-team-l.icon-dys {
			display: none !important;
		}

		.box-team {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			margin-bottom: 30rpx;

			.box-team-l {
				display: flex;
				align-items: center;

				.box-team-l-name {
					margin-right: 10rpx;
				}
			}

			.box-team-r {
				display: flex;
				align-items: center;
				color: #02BB6F;
			}
		}

		.box-tit {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			margin-bottom: 30rpx;

			.tit-text {
				color: #FE5050;
			}

			.txt-jc {
				font-weight: bold;
			}
		}

		.box-con {
			display: flex;
			justify-content: center;
			align-items: center;

			.box-ewm {
				width: 246rpx;
				height: 246rpx;
			}
		}
	}



	.page-foot {
		position: fixed;
		bottom: 0;
		display: flex;
		line-height: 100rpx;
		font-size: 36rpx;
		font-weight: boldl;
		height: 100rpx;
		width: 100%;

		.page-foot-l {
			flex: 6;
			padding-left: 30rpx;
			text-align: left;
			background: #fff;
			font-size: 32rpx;
			font-weight: bold;
			color: #FE5050;
		}

		.page-foot-r {
			flex: 4;
			text-align: center;
			background: #02BB6F;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
</style>
